<template>
  <div class="register-page">
    <div class="register-title">注册账号 <span>📝</span></div>
    <div class="register-desc">请填写以下信息完成注册。</div>
    <div class="avatar-upload-center">
      <div class="avatar-preview-wrap">
        <img v-if="avatar" :src="avatar" class="avatar-preview" />
        <div v-else class="avatar-placeholder">+</div>
      </div>
      <van-uploader
        :after-read="onAvatarRead"
        :max-count="1"
        accept="image/*"
        :show-upload="false"
        class="avatar-uploader-btn"
      >
        <van-button size="small" type="primary" class="avatar-upload-btn">上传头像</van-button>
      </van-uploader>
    </div>
    <van-field v-model="username" label="用户名" placeholder="输入用户名" clearable />
    <van-field v-model="account" label="账号" placeholder="输入账号（邮箱/手机号）" clearable />
    <van-field 
      v-model="password" 
      label="密码" 
      placeholder="输入密码" 
      :type="showPwd ? 'text' : 'password'" 
      clearable 
      :right-icon="showPwd ? 'eye-o' : 'closed-eye'" 
      @click-right-icon="showPwd = !showPwd" 
    />
    <van-field 
      v-model="confirmPwd" 
      label="确认密码" 
      placeholder="再次输入密码" 
      :type="showConfirmPwd ? 'text' : 'password'" 
      clearable 
      :right-icon="showConfirmPwd ? 'eye-o' : 'closed-eye'" 
      @click-right-icon="showConfirmPwd = !showConfirmPwd" 
    />
    <van-button block type="primary" class="register-btn" @click="onRegister">注册</van-button>
    <div class="login-tip">
      已有账号？<span class="login-link" @click="goToLogin">立即登录</span>
    </div>
    <van-dialog v-model:show="showDialog" title="注册成功！" show-cancel-button>
      <div style="text-align:center;">请使用新账号登录。</div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { db, STORES } from '../../utils/db'

const router = useRouter()
const avatar = ref('')
const username = ref('')
const account = ref('')
const password = ref('')
const confirmPwd = ref('')
const showPwd = ref(false)
const showConfirmPwd = ref(false)
const showDialog = ref(false)

const goToLogin = () => {
  router.replace('/login')
}

const onAvatarRead = (file) => {
  if (file.content) {
    avatar.value = file.content
  } else if (file.file) {
    const reader = new FileReader()
    reader.onload = e => {
      avatar.value = e.target.result
    }
    reader.readAsDataURL(file.file)
  }
}

const onRegister = async () => {
  if (!avatar.value) {
    showToast('请上传头像')
    return
  }
  if (!username.value || !account.value || !password.value || !confirmPwd.value) {
    showToast('请填写完整信息')
    return
  }
  if (password.value !== confirmPwd.value) {
    showToast('两次密码不一致')
    return
  }

  try {
    // 从 IndexedDB 获取用户列表
    const userList = await db.getAll(STORES.USER_LIST)
    
    // 账号唯一性校验
    if (userList.find(u => u.account === account.value)) {
      showToast('账号已存在')
      return
    }

    // 保存用户到 IndexedDB
    const newUser = {
      avatar: avatar.value,
      username: username.value,
      account: account.value,
      password: password.value,
      starList: []
    }
    
    await db.put(STORES.USER_LIST, newUser)
    
    showDialog.value = true
    setTimeout(() => {
      showDialog.value = false
      router.replace('/login')
    }, 1200)
  } catch (error) {
    console.error('注册失败:', error)
    showToast('注册失败，请重试')
  }
}
</script>

<style scoped>
.register-page {
  min-height: 100vh;
  background: #fafaff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}
.avatar-upload-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 18px 0 18px 0;
  width: 100%;
}
.avatar-preview-wrap {
  width: 80px;
  height: 80px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e0e0e0;
  box-shadow: 0 2px 8px #e0e0e0;
}
.avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #f0f0f0;
  color: #bbb;
  font-size: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #e0e0e0;
}
.avatar-uploader-btn {
  margin-bottom: 4px;
}
.avatar-upload-btn {
  border-radius: 16px;
  font-size: 14px;
  padding: 0 18px;
  background: #7c5dfa;
  border: none;
}
.avatar-tip {
  font-size: 12px;
  color: #aaa;
  margin-top: 2px;
}
.register-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #222;
  text-align: left;
  width: 100%;
}
.register-desc {
  font-size: 14px;
  color: #888;
  margin-bottom: 24px;
  width: 100%;
  text-align: left;
}
.register-btn {
  background: #7c5dfa;
  border-radius: 18px;
  margin-top: 18px;
  font-size: 16px;
  font-weight: bold;
}
.login-tip {
  margin-top: 16px;
  font-size: 14px;
  color: #666;
}
.login-link {
  color: #7c5dfa;
  cursor: pointer;
}
</style>
